<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>扩展配置</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        header {
            margin-bottom: 30px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .config-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        li {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        li span {
            margin-right: 10px;
            white-space: nowrap;
            width: 80px;
            text-align: right;
        }

        li input:not([type="checkbox"]),
        li textarea {
            width: 600px;
            min-width: 600px;
            max-width: 600px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }

        button {
            padding: 8px 16px;
            background-color: #0078d7;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        button:hover {
            background-color: #005a9e;
        }

        .status-message {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            display: none;
        }

        .success {
            background-color: #dff0d8;
            color: #3c763d;
        }

        .error {
            background-color: #f2dede;
            color: #a94442;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1 style="margin: 0; color: #333;">扩展配置</h1>
            <p style="color: #666; margin-top: 5px;">设置元素选择器和其他扩展选项</p>
        </header>

        <div class="groups">
            <template id="GROUP_TEMPLATE">
                <div class="config-group">
                    <label>配置名称</label>
                    <ul>
                        <li>
                            <span>目标选择器：</span>
                            <input type="text" name="target_selector" placeholder="请输入目标元素CSS选择器">
                        </li>
                        <li>
                            <span>iframe 选择器：</span>
                            <input type="text" name="iframe_selector" />
                        </li>
                        <li>
                            <span>输入内容：</span>
                            <textarea name="content" placeholder="请输入需要自动填入的内容"></textarea>
                        </li>
                    </ul>
                </div>
            </template>
        </div>


        <button id="newConfig" style="padding: 10px 20px; font-size: 16px;">新增配置</button>
        <button id="saveConfig" style="padding: 10px 20px; font-size: 16px;">保存配置</button>
        <button id="clearConfig" style="padding: 10px 20px; font-size: 16px;">清除配置</button>
        <div id="statusMessage" class="status-message"></div>
        <script src="options.js"></script>
    </div>
</body>

</html>